<template>
  <el-dialog v-model="userSelectVisible" title="用户列表-单选" width="800">
    <!-- <div class="flex mb-8">
      <el-select class="mr-8" v-model="processType">
        <el-option
          v-for="item in processTypeOpts"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select class="mr-8" v-model="processType">
        <el-option
          v-for="item in processTypeOpts"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input />
    </div> -->
    <el-table
      ref="userTable"
      :data="userList"
      @selection-change="handleSelectionChange"
      style="width: 100%"
    >
     <el-table-column type="selection" width="55"/>
      <el-table-column prop="nickname" label="姓名" width="180"/>
      <el-table-column prop="region_name" label="单位" width="180"/>
      <el-table-column prop="dept_name" label="部门" width="180"/>
      <el-table-column prop="mobile" label="电话"/>
    </el-table>

    <!-- <el-pagination
      class="mt-16"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="total"
      :small="true"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    /> -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="userSelectVisible = false">取消</el-button>
        <el-button type="primary" @click="confirm"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {staticData} from '@/views/project/mixins/staticDataMixin'
// import * as UserApi from '@/api/system/user'
import * as UserApi from '@/api/project/ict'
import { ref, watch } from 'vue';

const emit = defineEmits(['updateSelectedUser']);

const props = defineProps({
  // 用户角色列表参数
  userSelectDialogProps: {
    type: Object,
    default: () => ({
      role: "projectManager",
      execute_region: '西安分公司'
    })
  }
})
const { regionCodeMap, roleCodeMap } = staticData()

const userTable = ref()

// 模态框显隐值
const userSelectVisible = ref(false)
// 人员列表对应字段
const currentFieldName = ref('')
// 人员表格数据
const userList = ref([])
// 选中的人员数据
const selectedRows = ref([]);

const processType = ref('')
const processTypeOpts = ref([
  // {
  //   value: 'Option1',
  //   label: 'Option1'
  // },
  // {
  //   value: 'Option2',
  //   label: 'Option2'
  // },
  // {
  //   value: 'Option3',
  //   label: 'Option3'
  // },
  // {
  //   value: 'Option4',
  //   label: 'Option4'
  // }
])
// 当前页
const currentPage = ref(1)
// 每页数量
const pageSize = ref(20)
// 数据总量
const total = ref(10)
// 切换页码方法
const handleCurrentChange = (page) => {
  console.log('page', page)
}
// 切换每页数量方法
const handleSizeChange = (size) => {
  console.log('size', size)
}


const getUserList = () => {
  try {
    const params = {
      role_ids: roleCodeMap[props.userSelectDialogProps.role],
      execute_region: regionCodeMap[props.userSelectDialogProps.execute_region]
    }
    UserApi.getProjectUserList(params).then(res => {
      userList.value = res
    })
  } catch (error) {
    console.error('用户列表获取错误:', error)
  }
};

const handleSelectionChange = (selection) => {
  if (selection.length > 1) {
    // 从选中列表中移除旧的选择，只保留最新的一项
    selectedRows.value = selection[1];
    const unSelectRow = selection.shift()
    userTable.value.toggleRowSelection(unSelectRow, false)
  } else {
    selectedRows.value = selection;
  }
};

const confirm = () => {
  userSelectVisible.value = false
  emit('updateSelectedUser', { userList: selectedRows.value, fieldName: currentFieldName.value })
};

// 监控 userSelectVisible 变量
watch(userSelectVisible, (newVal) => {
  if (newVal) {
    getUserList();
  }
});

// 父组件使用ref调用的参数和方法
defineExpose({ userSelectVisible, currentFieldName})
</script>

<style lang="scss" scoped>
@import url('@/views/project/projectDetails/styles/transfer.css');
</style>